<template>
  <div id="InsurServices" :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}">
    <!-- <div class="title">
      <span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">
        <van-icon name="arrow-left" />
        返回
      </span>
      保险服务
    </div> -->
    <div style="padding: 4px">
      <P class="P" :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}">XX农民“农房保险”</P>
    </div>
    <div class="content">
      <div class="boxser">
        <ul>
          <li v-for="item in imagesList" :key="item">
            <img :src="item.img" alt="">
            <div class="num">{{item.title}}</div>
          </li>
        </ul>
      </div>
      <div style="line-height:5vh;padding-left:10px;">
        服务范围：<span>惠州市衢州市</span>
      </div>
      <div style="margin-bottom:10px;padding-left:10px;">
        联系方式：<span>0571-293589 13534542345</span>
      </div>
      <div style="margin:0px 10px 10px;">
        <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/30(1).png" width="100%" height="" alt="">
      </div>
      <el-button size="mini" type="primary" style="width:100vw;" :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}">购买保险</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showEdition: false,
      value: '',
      imagesList: [
        {
          title: '手续简单',
          img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/27.png'
        },
        {
          title: '上门服务',
          img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/28.png'
        },
      ]
    }
  },
  mounted () {
    this.showEdition = this.$store.state.Edition
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        "title": "保险服务"
      }).then(res => {
      }).catch(err => {
      })
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push({
        path: '/ZLJIndex',
      });
    },
  }
}
</script>
<style lang="scss">
#InsurServices {
  background: #fff;
  font-size: 14px;
  height: 100vh;
  .title {
    width: 100%;
    height: 50px;
    // background: #007aff;
    line-height: 50px;
    text-align: center;
    // color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .P {
    line-height: 5vh;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .content {
    height: calc(100vh - 95px);
    overflow: auto;
  }
  .boxser {
    clear: both;
    height: 15vh;
    padding: 10px;
    border-bottom: 1px solid #eee;
    ul {
      height: 100%;
      display: flex;
      // flex-direction: column;
      justify-content: center;
      li {
        float: left;
        width: 50%;
        text-align: center;
        .num {
          line-height: 5vh;
        }
      }
    }
  }
}
</style>
